<#import "../include/footer.ftl" as footer>
<#import "/widget/search_widget.ftl" as search>
<#macro layout legend>
	<#include "../include/header.ftl"/>
	         <!-- 
        DEBUG STUFF FOR js
        ENABLE WHEN REQUIRED !
        REMOVE IN PRODUCTION
        F2 - show/hide
        Shift + F2 - change position (corners)
        Alt + Shift + F2 - Clear
        Alt + click icon (in blacbird window) - show only those type of messages
        Go here for more details: http://www.gscottolson.com/blackbirdjs/
        
        Public API

        log.toggle()            - Hide/show Blackbird
        log.move()              - Move Blackbird to next fixed positions: top-left, top-right, bottom-left, bottom-right
        log.resize()            - Expand/contract Blackbird
        log.clear()             - Clear all contents of Blackbird
        log.debug( message )    - Add a debug message to Blackbird
                                - message: the string content of the debug message
        log.info( message )     - Add an info message to Blackbird
                                - message: the string content of the info message
        log.warn( message )     - Add a warning message to Blackbird
                                - message: the string content of the warn message
        log.error( message )    - Add an error message to Blackbird
                                - message: the string content of the warn message
        log.profile( label )    - Start/end a time profiler for Blackbird. If a profiler named string does not exist, create a new profiler. 
                                - Otherwise, stop the profiler string and display the time elapsed (in ms).
                                - label: the string identifying a specific profile timer
        
        -->
     <script type="text/javascript" src="${contextRoot}/resources/blackbirdjs/blackbird.js"></script>
    <link type="text/css" rel="Stylesheet" href="${contextRoot}/resources/blackbirdjs/blackbird.css" />
	<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
    <link rel="stylesheet" href="${contextRoot}/resources/css/widget-slide-panel.css" />
		<div id="mainContainer" class="container">

			<#if RequestParameters['authfail']??>
				<div class="row">
					<div class="span12">
						<div id="authfailAlert" class="alert alert-error">
							Login failed
						</div>
					</div>
				</div>
			</#if>
			<#if RequestParameters['accessdenied']??>
				<div class="row">
					<div class="span12">
						<div id="accessdeniedAlert" class="alert alert-error">
							Access denied
						</div>
					</div>
				</div>
			</#if>
			<#if RequestParameters['login']??>
				<div class="row">
					<div class="span12">
						<div id="loginAlert" class="alert alert-warning">
							You are not signed in, please sign in first.
						</div>
					</div>
				</div>
			</#if>
			<#if RequestParameters['loggedout']??>
				<div class="row">
					<div class="span12">
						<div id="loggedoutAlert" class="alert alert-success">
							You have been logged out.
						</div>
					</div>
				</div>
			</#if>
			<#if createdUserFlag??>
				<div class="row">
					<div class="span12">
						<div id="createdUserAlert" class="alert alert-success">
							You account with email ${createdUser.email} has been created.
						</div>
					</div>
				</div>
			</#if>

			<div class="row">
				<div class="span12">
					<fieldset>
						<legend id="pageLegend">${legend}</legend>
					</fieldset>
				</div>
			</div>

            <!-- search widget -->
            <style>
            a.trigger{
                background:#88bbd4 url(${contextRoot}/resources/img/plus.png) 6% 55% no-repeat;
            }
            a.active.trigger {
                background:#666 url(${contextRoot}/resources/img/minus.png) 6% 55% no-repeat;
            }

            </style>
            <#if model??>
	            <#if model.hasErrors??>
	                <a href="#" id="trigger1" class="trigger left hidden-phone active absolute" onclick="checkIfClosed(); toggleSlidePanel(this,'side-panel-search');" style="">Search</a>
	                <div id="side-panel-search" class="panel left hidden-phone"  style="display:block;">
	                    <@search.widget/>
	                </div>
	            <#else>
	                 <a href="#" id="searchSectionTrigger" class="trigger left hidden-phone absolute" onclick="checkIfClosed(); toggleSlidePanel(this,'side-panel-search');" style="">Search</a>
	                <div id="side-panel-search" class="panel left hidden-phone" >
	                    <@search.widget/>
	                </div>
	            </#if>
	        </#if>

			<!-- nested content -->
			<#nested>

		</div> <!-- /container -->
		<script>
		var checkIfClosed = function(){
		  $('#search-widget-start').datepicker( "hide" );
		  $('#search-widget-end').datepicker( "hide" );
		  $('#submit-search').focus();
		},
		toggleSlidePanel = function(trigger, result){
		      $(trigger).toggleClass('active');
              $('#'+result).toggle();
	    };
		
		</script>
		<!-- <script src="${contextRoot}/resources/js/debug/event-tracking.js" ></script> -->
		<script src="${contextRoot}/resources/js/widget-slide-panel.js" ></script>
        <script src="http://jhere.net/js/jhere.js"></script>
	<#include "../include/footer.ftl"/>
</#macro>